{% block head %}
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="viewport" content="viewport-fit=cover, user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}" crossorigin="use-credentials"/>
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/apple-touch-icon.png') }}"/>

    <!-- Hide page initially to prevent flash -->
    <style>
        html { visibility: hidden; }
    </style>

    <!-- dark mode script -->
    <script type="application/javascript">
        (function() {
            const darkPref = localStorage.getItem('darkSwitch');
            if (darkPref === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
            document.addEventListener('DOMContentLoaded', () => {
                document.documentElement.style.visibility = 'visible';
            });
        })();
    </script>

    <!-- Libraries -->
    <script src="{{ url_for('static', filename='js/jquery-3.5.1.min.js') }}"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"
            integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>

    <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">

    <!-- Highlight Active Tab -->
    <script type="application/javascript">
        function activeTab(tab) {
            $("#nav" + tab).addClass("active");
        }
    </script>

    <!-- Dark Mode Button CSS -->
    <style>
        .custom-control-input:checked ~ .custom-control-label::before {
            color: #ced4da;
            border-color: #e8e8e8;
            background-color: #007bff;
        }
        div.custom-switch .custom-control-label {
            color: #ced4da !important;
        }
    </style>

    <!-- Set Page Title -->
    {% if session["arm_name"] %}
        {% if session["page_title"] %}
            <title>[{{ session["arm_name"] }}] - {{ session["page_title"] }} - ARM</title>
        {% endif %}
    {% else %}
        <title>ARM</title>
    {% endif %}

    {% block head_extra %}{% endblock %}
</head>
{% endblock %}
